import React, { useEffect } from 'react'
import { Form, Input, DatePicker, Switch, InputNumber, Select, Button, Tag, Checkbox, Upload, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import request from '@/utils/request'

const { TextArea } = Input
const { Option } = Select

const CheckboxGroup = Checkbox.Group;
export default (props: any) => {
    const { form, close, id } = props
    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };

    const onFinish = (values: any) => {

        if (values.logo && values.logo.length > 0) {
            values.logo = values.logo[0]['url'];
        }
        if (values.banner && values.banner.length > 0) {
            values.banner = values.banner[0]['url'];
        }
        values.expired_at = values['expired_at'].format('YYYY-MM-DD')
        request(`/store/update-basic/${id}`, {
            method: 'put',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message, 1, () => {
                close()
            })

            // getList()
        })
    }

    return (
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 16 }}
            form={form}
            onFinish={onFinish}
        
        >
            <Form.Item label="店铺名称" name="title" required rules={[{ required: true, message: '请选择店铺等级' }]}>
                <Input/>
            </Form.Item>
            <Form.Item label="到期时间" name="expired_at" help="店铺关闭时间，与入驻时长相关联">
                <DatePicker />
            </Form.Item>
            <Form.Item label="卖家账号">
                <Tag color="cyan">郭国聪</Tag>
            </Form.Item>
            <Form.Item label="是否自营" name="is_own" valuePropName="checked">
                <Switch />
            </Form.Item>
            <Form.Item label="主营行业" name="industry_id">
                <Select style={{ width: "220px" }}>
                    <Option value={0}>请选择</Option>
                    <Option value={1}>行业一</Option>
                </Select>
            </Form.Item>
            <Form.Item label="店铺等级" name="level_id">
                <Select style={{ width: "220px" }}>
                    <Option value={0}>请选择</Option>
                    <Option value={1}>等级一</Option>
                </Select>
            </Form.Item>
            <Form.Item label="店铺启用" name="enable" valuePropName="checked">
                <Switch />
            </Form.Item>
            <Form.Item label="排序" name="sort">
                <InputNumber />
            </Form.Item>
            <Form.Item label="店铺logo" name="logo" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                <Upload
                    action='http://127.0.0.1:8888/admin/tool/upload'
                    listType='picture'
                >
                    <Button><UploadOutlined /> Upload</Button>
                </Upload>
            </Form.Item>
            <Form.Item label="店铺条幅" name="banner" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                <Upload
                    action='http://127.0.0.1:8888/admin/tool/upload'
                    listType='picture'
                >
                    <Button><UploadOutlined /> Upload</Button>
                </Upload>
            </Form.Item>
            <Form.Item label="店铺关键字" name="keyword">
                <Input />
            </Form.Item>
            <Form.Item label="店铺简介" name="introduce">
                <TextArea rows={3} />
            </Form.Item>
            <Form.Item label="联系电话" name="telephone">
                <Input />
            </Form.Item>
            <Form.Item label="是否推荐" name="is_recommend" valuePropName="checked">
                <Switch />
            </Form.Item>
            <Form.Item label="服务保障" name="service_types">
                <CheckboxGroup
                    options={[{ label: "7天退货", value: 1 }, { label: "正品保障", value: 2 }, { label: "2h 发货", value: 3 },
                    { label: "退货承诺", value: 4 }, { label: "试用中心", value: 5 }, { label: "实体验证", value: 6 }, { label: "消协保证", value: 7 }]}
                />
            </Form.Item>
            <Form.Item
                wrapperCol={{ offset: 3 }}
            >
                <Button type="primary" htmlType="submit">保存</Button>
                <Button onClick={close} style={{ marginLeft: "6px" }}>取消</Button>
            </Form.Item>
        </Form>
    )
}